<template>
    <div>

        <div style="margin: 20px 5px 10px 5px;padding: 5px">
            <el-button type="success" @click="openWindow('roleChild',null)" icon="el-icon-plus"> 新增角色</el-button>
        </div>

        <div style="margin: 30px 5px 5px 5px;padding: 5px;">
            <el-table :header-cell-style="{background:'#67C23A',color:'white',fontSize:'15px'}" :data="data" v-loading="loading" size="mini" border stripe height="400">
                <el-table-column type="index" align="center" width="80px"></el-table-column>
                <el-table-column prop="name" label="角色名称" align="center"></el-table-column>
                <el-table-column prop="description" label="角色描述" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button  type="success" size="mini" @click="openWindow('roleChild',scope.row)">
                            <span class="el-icon-edit"></span>修改
                        </el-button>
                        <el-button  type="success" size="mini" @click="remove(scope.row)">
                            <span class="el-icon-delete"></span>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <div style="margin: 10px;text-align: center;">
            <el-pagination
                    layout="total,prev,pager,next"
                    :total="params.total"
                    :page-size="params.size"
                    :current-page="params.page"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"></el-pagination>
        </div>
        <role-child ref="roleChild"></role-child>
    </div>
</template>

<script>

    import { list } from '@/api/access/role.js'

    export default {
        name: "perm-role",
        data(){
            return {
                loading:true,
                data:[],
                params:{page:1,size:10,total:0},
            }
        },
        components:{
            RoleChild:()=>import("@/views/access/role-child.vue")
        },
        methods:{
            handleSizeChange(val){
                this.params.size = val;
                this.getList(this.params);
            },
            handlePageChange(val){
                this.params.page = val;
                this.getList(this.params);
            },
            getList(data){
                list(data).then(res=>{
                    if(res.data.success){
                        this.data = res.data.data.rows;
                        this.params.total = res.data.data.total;
                        this.loading = false;
                    }
                });
            },
            openWindow(name,data){
                if(data == null){
                    this.$refs[name].data = {};
                }else{
                    this.$refs[name].data = data;
                }
                this.$refs[name].value = true;
            },
            remove(data){
                this.$message.info("sorry,目前不提供删除功能");
                return false;
            }
        },
        created(){
            this.getList(this.params);
        }
    }
</script>

<style scoped>

</style>